import { mapState, mapActions, mapGetters } from 'vuex'

import {  POSITION_TYPES, PAGE_TYPE, PAGE_TYPE_ } from '@/common/const'
import { ComponentTypes } from '@/store/default-styles';


export const canvasUtils = {
  props: {
    title: String,
    tabName: String,
    controlId: String
  },
  created () {
    const data_ = {
      activeNames: [1],
      eventTabs: ['comp', 'position'],
      POSITION_TYPES: POSITION_TYPES,
      PAGE_TYPE: PAGE_TYPE,
      PAGE_TYPE_: PAGE_TYPE_,
    };
    for(let key in data_) {
      this[key] = data_[key];
    }
  },
  computed: {
    ...mapGetters("components", {
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    ...mapState({
      tabNames: (state) => _.cloneDeep(state.components.tabNames),
      componentData: (state) => state.components.currentComponentData,
      commonAttr: state => _.cloneDeep(state.components.currentComponentData.commonAttr),
      lists: (state) => _.cloneDeep(state.components.currentComponentData.lists),
      styles: (state) => _.cloneDeep(state.components.currentComponentData.styles),
      siteAttrs: (state) => state.components.attrs,
    }),
    getComId(){
      return {id: this.componentData.id}
    },
  },
  methods: {
    ...mapActions({
      updateTab: "components/updateTab",
      updateCurrentComponentData: "components/updateCurrentComponentData",
      addComponentItem: "components/addComponentItem",
      deleteComponentItem: "components/deleteComponentItem",
      updateComponentItem: "components/updateComponentItem",
      updateComponentStyles: "components/updateComponentStyles",

    }),
    isHasOwnProperty(obj, attr){
      return Object.prototype.hasOwnProperty.call(obj, attr)
    },
    onChangeAttr(){
      this.updateCurrentComponentData({commonAttr:this.commonAttr});
    },
    onUpdateTab(){
      let params = {};
      params[this.tabName] = this.tabNames[this.tabName]
      this.updateTab(params);
    },
    onChangeAttrId(){
      this.updateCurrentComponentData({id: this.getComId.id});
    },
    onAddItem(){
      let item = _.cloneDeep(ComponentTypes[this.componentData.cid].lists[0]);
      if(item){
        this.addComponentItem(item);
      }
    },
    onUpdateItem(index){
      this.updateComponentItem({index, item:this.lists[index]});
    },
    onDeleteItem(index){
      this.deleteComponentItem({index});
    },
    getLists(index) {
      let list = [];
      if(index == PAGE_TYPE_.pop){
        this.pushPops(list);
      }else{
        this.pushPages(list);
      }
      return list;
    },
    pushPages(list){
      let len = this.pages.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "页面-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    pushPops(list){
      let len = this.pops.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "弹层-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
  }
}
